import {Component} from 'react';
import React from 'react';

import {Button, Col, message, Row} from 'antd';
import APIS from '@/apis';
import MdDocShow from "@/components/MdDocShow";
import {newGuid} from "@/utils/utils";
import "../index.css"

interface StudentsTestPaperState {
  temp: any;
  examResultData: any;
  zones: Array<{ questions: Array<any> }>
  detail: { zones: [{ id: 0 }] },
  zone1Questions: [],
  zone2Questions: [],
  zone3Questions: [],
  zone4Questions: [],
  score: number,
  questionState: Map<any, any>,
}

export default class StudentsTestPaper extends Component<any, StudentsTestPaperState> {
  constructor(props: any) {
    super(props);
    this.state = {
      temp: this.props.location.state,
      examResultData: null,
      zones: [{questions: []}],
      detail: {zones: [{id: 0}]},
      zone1Questions: [],
      zone2Questions: [],
      zone3Questions: [],
      zone4Questions: [],
      score: 0,
      questionState: new Map(),
    }
  }

  ScoreAdd(value: number) {
    let temp: number = this.state.score;
    temp = temp + value;
    this.setState({score: temp})
  }

  componentDidMount() {
    let scoreResults: number = 0;
    APIS.CheckAPI.GetExamResult({examId: this.state.temp.examId, studentId: this.state.temp.studentId})
      .then(res => {
        this.setState({examResultData: res});
        this.state.examResultData?.examResults.map((v: any, k: number) => (
          v.content.map((vv: any, kk: number) => (
            vv.answer === vv.userAnswer ? scoreResults += 10 : "答案不对不得分"))))
        this.setState({score: scoreResults})
      })
    // APIS.CheckAPI.GetExamPaper({ id: this.state.temp.examId }).then(res => { this.setState({ zones: res.zones }) })
    APIS.ExamAPI.GetExamDetail({id: this.state.temp.paperId}).then(detail => {
      this.setState({detail: detail})
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[0]).then(res => {
        this.setState({zone1Questions: res})
      })
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[1]).then(res => {
        this.setState({zone2Questions: res})
      })
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[2]).then(res => {
        res.map((v: any, index: any) => {
          this.state.questionState.set(v.id, -1);
        })
        this.setState({zone3Questions: res})
      })
      APIS.ExamAPI.GetPaperQuestionList(detail.zones[3]).then(res => {
        res.map((v: any, index: any) => {
          this.state.questionState.set(v.id, -1);
        })
        this.setState({zone4Questions: res});
      })
    })
  }


  render() {
    const sorter = ["四", "三", "二", "一"];
    return (
      <div>
        <Row style={{backgroundColor: "#ddd", paddingTop: '20px', paddingBottom: '20px'}} justify='center'
             gutter={[16, 16]}>
          <Col span={10}>试卷标题：{this.state.examResultData?.examName}</Col>
          {/* <Col span={10}>所属课程：{}</Col> */}
          {/* <Col span={10}>课程教师：{}</Col> */}
          <Col span={10}>课程描述：{this.state.temp?.description}</Col>
        </Row>
        {this.state.zone1Questions.length === 0 ? <div></div> :
          <div style={{fontSize: '20px'}}>{sorter.pop()}、选择题</div>}
        <div>
          {this.state.zone1Questions.map?.((v: any, i: any) => (
            <div key={i}>
              <div className="Question-Text" >
                <span style={{fontSize:"16px"}}>{`${i + 1}. `}</span> <MdDocShow id={newGuid()}
                                                       style={{width: "98%"}}
                                                       value={v.content}/>
              </div>
              <div>
                {v.selections?.map((v: any, i: number) => (
                  <div key={i} style={{display: "flex"}}>
                    <span>{String.fromCharCode(65 + i) + '. '}</span> <MdDocShow id={newGuid()}
                                                                                 style={{width: "90%"}}
                                                                                 value={v}/>
                  </div>
                ))}
              </div>
              <div>
                正确答案：{this.state.examResultData?.examResults[0].content[i].answer.length === 1 ?
                String.fromCharCode(65 + parseInt(this.state.examResultData?.examResults[0].content[i].answer)) :
                this.state.examResultData?.examResults[0].content[i].answer.split(',').map((item: any) => {
                  return String.fromCharCode(65 + parseInt(item)) + " "
                })
              }
              </div>
              <div>
                用户答案：{this.state.examResultData?.examResults[0].content[i].userAnswer.length === 1 ?
                String.fromCharCode(65 + parseInt(this.state.examResultData?.examResults[0].content[i].userAnswer)) :
                this.state.examResultData?.examResults[0].content[i].userAnswer.split(',').map((item: any) => {
                  return String.fromCharCode(65 + parseInt(item)) + " "
                })
              }
              </div>
              <div>解析：{this.state.examResultData?.examResults[0].content[i].analyzing}</div>
              <div style={{float: "right"}}>
                <Button disabled>
                  {this.state.examResultData?.examResults[0].content[i].answer ===
                  this.state.examResultData?.examResults[0].content[i].userAnswer
                    ? '正确' : '错误'}
                </Button>
              </div>
            </div>
          ))}
        </div>
        <br/>
        {this.state.zone2Questions.length === 0 ? <div></div> :
          <div style={{fontSize: '20px'}}>{sorter.pop()}、判断题</div>}
        <div>
          {this.state.zone2Questions.map?.((v: any, i: any) => (
            <div key={i}>
              <div style={{fontSize: '18px', display: "flex"}}><span>{`${i + 1}. `}</span> <MdDocShow id={newGuid()}
                                                                                                      style={{width: "98%"}}
                                                                                                      value={v.content}/>
              </div>
              <div>
                正确答案：{this.state.examResultData?.examResults[1].content[i].answer === '1' ? '正确' : '错误'}
              </div>
              <div>
                用户答案：{this.state.examResultData?.examResults[1].content[i].userAnswer === '1' ? '正确' : '错误'}
              </div>
              <div>解析：{this.state.examResultData?.examResults[1].content[i].analyzing}</div>
              <div style={{float: "right"}}>

                <Button disabled>
                  {this.state.examResultData?.examResults[1].content[i].answer ===
                  this.state.examResultData?.examResults[1].content[i].userAnswer
                    ? '正确' : '错误'}

                </Button>
              </div>
            </div>
          ))}
        </div>
        <br/>
        {this.state.zone3Questions.length === 0 ? <div></div> :
          <div style={{fontSize: '20px'}}>{sorter.pop()}、填空题</div>}
        <div>
          {this.state.zone3Questions.map?.((v: any, i: any) => (
            <div key={i}>
              <div style={{fontSize: '18px', display: "flex"}}><span>{`${i + 1}. `}</span> <MdDocShow id={newGuid()}
                                                                                                      style={{width: "98%"}}
                                                                                                      value={v.content}/>
              </div>
              <div>
                正确答案：{this.state.examResultData?.examResults[2].content[i].answer}
              </div>
              <div>
                用户答案：{this.state.examResultData?.examResults[2].content[i].userAnswer}
              </div>
              <div>解析：{this.state.examResultData?.examResults[2].content[i].analyzing}</div>
              <div style={{float: "right"}}>
                {
                  this.state.questionState.get(v.id) === -1 ? <div style={{float: "right"}}>
                      <Button
                        style={{marginRight: 10}}
                        type="primary"
                        onClick={() => {
                          console.log("答案正确")
                          this.state.questionState.set(v.id, 1)
                          this.setState({score: this.state.score + 10})
                        }}
                      >
                        正确
                      </Button>
                      <Button
                        onClick={() => {
                          console.log("答案错误")
                          this.state.questionState.set(v.id, 0)
                          this.setState({score: this.state.score + 0})
                        }}
                      >
                        错误
                      </Button>
                    </div>
                    : this.state.questionState.get(v.id) === 1 ?
                    <div style={{float: "right"}}><Button disabled>正确</Button></div> :
                    <div><Button disabled>错误</Button></div>
                }
              </div>
            </div>
          ))}
        </div>
        <br/>
        {this.state.zone4Questions.length === 0 ? <div></div> :
          <div style={{fontSize: '20px'}}>{sorter.pop()}、简答题</div>}
        <div>
          {this.state.zone4Questions.map?.((v: any, i: any) => (
            <div key={i}>
              <div style={{fontSize: '18px', display: "flex"}}><span>{`${i + 1}. `}</span> <MdDocShow id={newGuid()}
                                                                                                      style={{width: "98%"}}
                                                                                                      value={v.content}/>
              </div>
              <div>
                正确答案：{this.state.examResultData?.examResults[3].content[i].answer}
              </div>
              <div>
                用户答案：{this.state.examResultData?.examResults[3].content[i].userAnswer}
              </div>
              <div>解析：{this.state.examResultData?.examResults[3].content[i].analyzing}</div>
              {
                this.state.questionState.get(v.id) === -1 ? <div style={{float: "right"}}>
                    <Button
                      style={{marginRight: 10}}
                      type="primary"
                      onClick={() => {
                        console.log("答案正确")
                        this.state.questionState.set(v.id, 1)
                        this.setState({score: this.state.score + 10})
                      }}
                    >
                      正确
                    </Button>
                    <Button
                      onClick={() => {
                        console.log("答案错误")
                        this.state.questionState.set(v.id, 0)
                        this.setState({score: this.state.score + 0})
                      }}
                    >
                      错误
                    </Button>
                  </div>
                  : this.state.questionState.get(v.id) === 1 ?
                  <div style={{float: "right"}}><Button disabled>正确</Button></div> :
                  <div style={{float: "right"}}><Button disabled>错误</Button></div>
              }
            </div>
          ))}
        </div>
        <br/>
        <div style={{float: "right"}}>
          <Button
            style={{marginTop: "1rem"}}
            type={'primary'}
            size={'large'}
            onClick={() => {
              APIS.ExamAPI.ExamResultCorrect({id: this.state.examResultData.resultId, score: this.state.score})
                .then(res => {
                  if (res.code === 10000) message.success("提交成功");
                  setTimeout(() => {
                    this.props.history.goBack()
                  }, 2000);
                })
            }}
          >
            提交
          </Button>
        </div>
      </div>
    )
  }
}
